<!-- 
 * 科研机构管理
 * @author: 
 * @since: 2022-05-11
 * index.vue
-->
<template>
    <div class="scientific-container h100">
        <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
        <div v-show="routerCutLevel === 2" class="listPage">
            <div class="search">
                <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
            </div>
            <div class="table">
                <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="comEvent" @colSelect="colSelect" @refresh="getScientificList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="335">
                    <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
                </TableCom>
            </div>
            <el-dialog v-model="isShowLead" title="科研机构导入" width="30%" :before-close="() => (isShowLead = false)">
                <uploadDownload @upload="uploadFile"></uploadDownload>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { getScientificListApi, getCityInfoApi, scientificBatchHandleApi } from '@/api/interface/scientific.js'
import { sessionstorage } from '@/utils/storage.js'
import { successHandle, colFilters, tableIsEnable, batchHandle } from '@/utils/common.js'
const router = useRouter();
const store = useStore();

const state = reactive({
    formModel: {//科研机构管理搜索列表的参数
        keyword: '',//机构名称
        patentCount: '',//专利数量
        provinceCode: '',//机构所在地
        valid: '',//状态
        contact: '',//联系电话
    },
    formLabel: [
        {
            label: '机构名称',
            model: "keyword",
            type: "text",
            width: '160',
            placeholder: '请输入机构名称',
        },
        {
            label: '机构专利数量',
            model: "patentCount",
            type: "number",
            width: '160',
            placeholder: '请输入专利数量',
        },
        {
            label: '机构所在地',
            model: "provinceCode",
            type: "select",
            width: '160',
            placeholder: '请选择机构所在地',
            option: [],
        },
        {
            label: '状态',
            model: "valid",
            type: "select",
            width: '160',
            placeholder: '请选择状态',
            option: [
                {
                    key: '全部',
                    value: ''
                },
                {
                    key: '启用',
                    value: true
                },
                {
                    key: '禁用',
                    value: false
                },

            ],
        },
        {
            label: '联系电话',
            model: "contact",
            type: "text",
            width: '160',
            placeholder: '请输入联系电话',
        },
    ],
    tableData: [],
    tableHeader: [
        {
            label: '机构名称',
            prop: "name",
            isLink: true,
            function: 'detail'
        },
        {
            label: '机构商标',
            prop: "logoUrl",
            isImg: true,
        },
        {
            label: '机构所在地',
            prop: "address",
        },
        {
            label: '机构专利数量',
            prop: "patentCount",
        },
        {
            label: '联系电话',
            prop: "contact",
        },
        {
            label: '状态',
            prop: "valid",
            status: true
        },
    ],
    btnData: [
        {
            name: '编辑',
            icon: 'bianji',
            color: '#25D390',
            change: 'edit'
        },
        {
            name: '删除',
            icon: 'shanchu',
            color: '#F74B33',
            change: 'del'
        },
        {
            name: '是否启用',
            isStart: true,
            prop: 'valid',
            change: 'enable'
        },
        {
            name: '是否热门',
            isStart: true,
            prop: 'isHot',
            change: 'hot'
        },
        {
            name: '是否推荐',
            isStart: true,
            prop: 'isRecommend',
            change: 'recommend'
        },
    ],
    pagination: {//分页
        currentPage: 1,
        size: 10,
        total: 0,
    },
    selectTableId: [],//选择表格数据

})
//区域加载
const loading = ref(true)
//科研机构模块功能按钮
const btnList = reactive([
    {
        name: '新增科研机构',
        icon: '',
        bgColor: '#25D390'
    },
    // {
    //   name: '科研机构导入',
    //   icon: 'daoru',
    //   bgColor: '#00A2FF'
    // },
    // {
    //   name: '导出全量科研机构',
    //   icon: 'daochu1',
    //   bgColor: '#00A2FF'
    // },
    // {
    //   name: '导出选中科研机构',
    //   icon: 'daochu1',
    //   bgColor: '#00A2FF'
    // },
    {
        name: '批量启用',
        icon: 'qiyong',
        bgColor: '#00A2FF'
    },
    {
        name: '批量禁用',
        icon: 'forbid',
        bgColor: '#FFB018'
    },
    {
        name: '批量删除',
        icon: 'shanchu',
        bgColor: '#F74B33'
    },


])
//是否导入科研机构
const isShowLead = ref(false)

const routerCutLevel = computed(() => {
    return store.getters['setting/routerCutLevel']
})


onMounted(() => {
    state.formModel.valid = state.formLabel[3].option[0].value
    getCityInfo()
    getScientificList()
})

//获取行政区域编码
const getCityInfo = () => {
    const params = {
        criSuperiorCode: '000000',
    }
    getCityInfoApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.formLabel[2].option = data.map(item => ({
                key: item.criName,
                value: item.criCode
            }))


        }
    })

}

//获取科研机构列表
const getScientificList = () => {
    loading.value = true
    const params = {
        ipi: state.pagination.currentPage,//当前页
        ips: state.pagination.size,//条数
        contact: state.formModel.contact,//联系电话
        keyword: state.formModel.keyword,//机构名称
        valid: state.formModel.valid,//状态
        provinceCode: state.formModel.provinceCode,//行政编码
        patentCount: state.formModel.patentCount,//机构专利数量
        orderField: "patentCount",//按照专利数量倒序
        orderType: "desc"
    }
    getScientificListApi(params).then(res => {
        const { data, status } = res
        if (status === 200) {
            loading.value = false
            state.tableData = data.result
            state.pagination.total = data.total
            state.pagination.currentPage = data.pageNum
            state.pagination.size = data.pageSize

        }
    })

}

//上传文件
const uploadFile = (data) => {
    console.log(data, 'data');

}

//点击科研机构操作按钮
const clickHandle = (index) => {
    switch (index) {
        case 0://新增科研机构
            router.push({ name: 'ScientificAdd' }).catch(() => { })
            break;
            // case 1://科研机构导入
            //   isShowLead.value = true
            //   break;
            // case 2://导出全量科研机构
            //   break;
            // case 3://导出选中科研机构
            break;
        case 1://批量启用
            batchHandle(state.selectTableId, 'START', () => {
                scientificBatchHandle('START')
            })
            break;
        case 2://批量禁用
            batchHandle(state.selectTableId, 'STOP', () => {
                scientificBatchHandle('STOP')
            })
            break;
        case 3://批量删除
            batchHandle(state.selectTableId, 'DEL', () => {
                scientificBatchHandle('DEL')
            })
            break;
    }
}

//科研机构批量操作
const scientificBatchHandle = (type) => {
    const params = {
        batchType: type,
        ids: state.selectTableId
    }
    scientificBatchHandleApi(params).then(res => {
        successHandle(res)
        getScientificList()
    })

}


//搜索
const filter = () => {
    getScientificList();
}
//重置
const reset = () => {
    for (let key in state.formModel) {
        state.formModel[key] = ''
    }
    getScientificList()
}

//点击当前页
const getCurrentChange = (val) => {
    state.pagination.currentPage = val;
    getScientificList()
}

//点击条数
const getSizeChange = (val) => {
    state.pagination.size = val;
    getScientificList()
}

//表格中的操作
const comEvent = (type, data) => {
    switch (type) {
        case 'edit'://编辑
            sessionstorage.set('scientificInfo', data)
            router.push({ name: 'ScientificEdit', data }).catch(() => { })
            break;
        case 'del'://删除
            tableIsEnable(state.tableData, 'del', data, (newArr) => {
                state.selectTableId = newArr
                scientificBatchHandle('DEL')
            })
            break;
        case 'hot'://是否热门
            tableIsEnable(state.tableData, 'isHot', data, (newArr) => {
                state.selectTableId = newArr
                !(data.isHot) ? scientificBatchHandle('START_HOT') : scientificBatchHandle('STOP_HOT')
            })
            break;
        case 'enable'://是否启用
            tableIsEnable(state.tableData, 'valid', data, (newArr) => {
                state.selectTableId = newArr
                !(data.valid) ? scientificBatchHandle('START') : scientificBatchHandle('STOP')
            })
            break;
        case 'recommend'://是否推荐
            tableIsEnable(state.tableData, 'isRecommend', data, (newArr) => {
                state.selectTableId = newArr
                !(data.isRecommend) ? scientificBatchHandle('START_RECOMMENDED') : scientificBatchHandle('STOP_RECOMMENDED')
            })
            break;
        case 'detail'://详情
            sessionstorage.set('scientificInfo', data)
            router.push({ name: 'ScientificDetails', params: data }).catch(() => { })
            break;

    }
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
    if (type === 'filter') {
        const currentData = colFilters(data, e, currentItem, state.tableHeader)
        state.tableHeader = currentData;
    } else {//全选/全取消
        state.tableHeader = data;
    }
}

//选择表格数据
const getSelectChange = (row) => {
    state.selectTableId = row.map(item => item.id)
}

</script>

<style lang="scss" scoped></style>
